<!-- <template>
	<view class="operate_model">
		<view class="header">
			<view class="header_default" v-for="(item, index) of datalist" :key="index">
				<view class="header_default_name">
					<u-button :text="item.subChildren[titleActiveList[index]].title" :icon="iconActive == index ? 'arrow-up' : 'arrow-down'"
						@click="changeSelect(item, index, titleActiveList[index])"></u-button>
				</view>
			</view>
		</view>
		<u-popup :show="maskIsShow" :safeAreaInsetTop="true" mode="top"
			@close="maskIsShow = false; iconActive = undefined" :overlayStyle="overlayStyle">
			<view class="operate_model">
				<view class="header_popup">
					<view class="popup">
						<view :class="['active']"
							v-for="(childrenItem, childrenIndex) of activeList"
							:key="childrenIndex">
							<u-cell @click="changeActiveValue(childrenIndex,childrenItem)">
								<template slot="title">
									<view
										:class="[activeList[defaultActiveName].title == childrenItem.title ? 'popupactive' : '' ]">
										{{ childrenItem.title }}
									</view>
								</template>
								<template slot="right-icon">
									<u-icon name="arrow-right"></u-icon>
								</template>
							</u-cell>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				iconActive: undefined,  
				maskIsShow: false,
				activeList: [],
				defaultActiveName: 0,
				overlayStyle: {
					heigh: "700rpx"
				},
				titleActiveList: [0,0]
			}
		},
		mounted() {
 
		 
		},
		props: {
			datalist: {
				type: Array,
				default: () => [{
						subChildren: [{
								id: 0,
								title: '本月代收',
							},
							{
								id: 1,
								title: '逾期未付',
							},
							{
								id: 2,
								title: '已付账单',
							},
						]
					},
					{
						subChildren: [
							{
								id: 99,
								title: '已付账单',
							},
							{
								id: 100,
								title: '哈哈已付账单',
							},
							{
								id: 99,
								title: 'hahahah已付账单',
							},
						]
					}

				]
			},

		},
		methods: {
			computedTile(index) {
				return this.datalist[index].subChildren[this.titleActiveList[this.defaultActiveName]].title
			},

			changeActiveValue(index, item) {
				 this.titleActiveList[this.iconActive] = index
				this.defaultActiveName = index
				this.maskIsShow = false;
				this.iconActive = undefined
			},
			changeSelect(item, index) {
				if (this.iconActive == undefined) {
					this.iconActive = index
					this.maskIsShow = true
					this.activeList = item.subChildren
				} else {
					this.iconActive = undefined
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popupactive {
		color: red !important;
	}

	.operate_model {
		height: 100rpx;
		width: 100%;
		z-index: 9999999999999;

		.header {
			width: 100%;
			height: 100%;
			display: flex;
			// background-color: antiquewhite;


			.header_default {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;

				.header_default_name {
					width: 100%;
					height: 100%;
					color: #000;
				}
			}
		}

		.header_popup {
			margin-top: 100rpx;
		}

		.popup {
			width: 100%;
			background-color: #fff;
		}
	}
</style> -->

<template>
	<view class="select_box">
		<view class="children_select">
			<uni-data-select v-model="value" :localdata="range" @change="change" :clear="false"></uni-data-select>
		</view>
		<view class="children_select">
			<uni-data-select v-model="value1" :localdata="range1" @change="change1" :clear="false"></uni-data-select>
		</view>
	</view>
</template>

<script>
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue"

	export default {
		components: {
			uniDataSelect
		},
		data() {
			return {
				value: 1,
				value1: 0,
				range: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
				range1: [{
						value: 0,
						text: "篮球"
					},
					{
						value: 1,
						text: "足球"
					},
					{
						value: 2,
						text: "游泳"
					},
				],
			};
		},
		methods: {
			change(e) {
			 
			},
			change1(e) {
				 
			},
		},
	}
</script>

<style lang="scss" scoped>
	.select_box {
		display: flex;
		.children_select {
			flex: 1;
		}
	}
</style>